<template>
  <div class="icesoft-menu-page">
    <a-menu
        theme="dark"
        mode="inline"
        :selected-keys="defaultActive"
        :open-keys="openKeys"
    >
      <template v-for="item in menu">
        <template v-if="item.isShow">
          <a-sub-menu v-if="item.children " :index="item.path" :key="item.path" :title="item.name">
            <template #icon>
              <i-icon :icon="item.icon" />
            </template>
            <a-menu-item
                v-for="children in item.children"
                :index="children.path"
                :key="children.path"
                :title="children.name"
                @click="onSelect(children,item)"
            >
              <template #icon>
                <i-icon  :icon="children.icon" />
              </template>
              <template #title>
                {{children.name}}
              </template>
              <span>   {{children.name}}</span>
            </a-menu-item>
          </a-sub-menu>

          <a-menu-item
              v-else
              :index="item.path"
              :label="item.name"
              @click="onSelect(item)"
          >
            <template #icon>
              <i-icon  :icon="item.icon" />
            </template>
            <template #title>
              {{item.name}}
            </template>
            <span>   {{item.name}}</span>
          </a-menu-item>

        </template>
      </template>
    </a-menu>
  </div>

</template>

<script setup lang="ts">
import {storeToRefs} from "pinia";
import {useMenuStore} from "~/store/modulers/menu";
import IIcon from "~/icesoft/components/icon/IIcon.vue";
import router from "~/router";

const menuStore = useMenuStore();
const { defaultActive, openKeys, menu } = storeToRefs(menuStore);

function onSelect(menu: any,open?:any) {
  menuStore.setActive(menu,open);
  router.push(menu.path)
}
</script>

<style scoped lang="scss">
.icesoft-menu-page{
  height: calc( 100vh - 64px );
  overflow-y: auto;
}
</style>
